<!-- 物流公司 添加/编辑/查看 组件 -->
<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="businessLicense">
            <span slot="label">
              营业执照
              <el-tooltip effect="dark" placement="top" content="上传后可识别营业执照信息">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-image v-if="readonly" class="image-slot" :src="form.businessLicense" fit="fit" :preview-src-list="srcList" @click="preview(form.businessLicense)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <image-upload v-else v-model="form.businessLicense" :value="form.businessLicense" :limit="1" @input="licenseUploadSuccess" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="道路运输经营许可证" prop="roadLicense">
            <el-image v-if="readonly" class="image-slot" :src="form.roadLicense" fit="fit" :preview-src-list="srcList" @click="preview(form.roadLicense)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <image-upload v-else v-model="form.roadLicense" :value="form.roadLicense" :limit="1" @input="roadUploadSuccess" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="法人身份证人像面" prop="idCardImg1">
            <el-image v-if="readonly" class="image-slot" :src="form.idCardImg1" fit="fit" :preview-src-list="srcList" @click="preview(form.idCardImg1)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <image-upload v-else v-model="form.idCardImg1" :value="form.idCardImg1" :limit="1" @input="idCard1UploadSuccess" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人身份证国徽面" prop="idCardImg2">
            <el-image v-if="readonly" class="image-slot" :src="form.idCardImg2" fit="fit" :preview-src-list="srcList" @click="preview(form.idCardImg2)">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <image-upload v-else v-model="form.idCardImg2" :value="form.idCardImg2" :limit="1" @input="idCard2UploadSuccess" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="form.companyName" maxlength="30" placeholder="请上传营业执照" :readonly="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纳税人识别码" prop="taxNo">
            <el-input v-model="form.taxNo" maxlength="25" placeholder="请上传营业执照" :readonly="readonly" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="法人" prop="legal">
            <el-input v-model="form.legal" maxlength="10" placeholder="请上传营业执照" :readonly="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册地址" prop="address">
            <el-input v-model="form.address" maxlength="50" placeholder="请上传营业执照" :readonly="readonly" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="tel">
            <span slot="label">
              公司电话
              <el-tooltip effect="dark" placement="top" content="将用于开具发票">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-input v-model="form.tel" maxlength="15" placeholder="请输入公司电话" :readonly="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="licenseNo">
            <span slot="label">
              道路许可证
              <el-tooltip effect="dark" placement="top" content="道路运输经营许可证号">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-input v-model="form.licenseNo" minlength="12" maxlength="50" placeholder="请输入道路运输经营许可证号" :readonly="readonly" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="bankcard">
            <span slot="label">
              银行账号
              <el-tooltip effect="dark" placement="top" content="将用于开具发票">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-input v-model="form.bankcard" maxlength="20" placeholder="请输入银行账号" :readonly="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="bank">
            <span slot="label">
              开户行
              <el-tooltip effect="dark" placement="top" content="将用于开具发票">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
            <el-input v-model="form.bank" maxlength="30" placeholder="请输入开户行" :readonly="readonly" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="公司联系人" prop="linker">
            <el-input v-model="form.linker" maxlength="10" placeholder="请输入公司联系人姓名" :readonly="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人电话" prop="linktel">
            <el-input v-model="form.linktel" maxlength="11" placeholder="请输入联系人电话" :readonly="readonly" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footerr">
      <el-button v-if="!readonly" type="primary" :disabled="disabled" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">{{ readonly ? '关 闭' : '取 消' }}</el-button>
    </div>
  </div>
</template>

<script>
import { getCompany, addCompany, updateCompany } from "@/api/tws/company";
import { ocrBusinessLicense } from "@/api/tws/third";

export default {
  name: 'CompanyForm',
  components: {
  },
  props: {
    // 模式：1新增 2修改 3查看
    mode: {
      type: String,
      default: '3'
    },
    companyId: {
      type: String
    }
  },
  data() {
    return {
      readonly: true,
      disabled: false,
      // 图片预览
      srcList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        companyName: [
          { required: true, message: "公司名称不能为空", trigger: "blur" }
        ],
        taxNo: [
          { required: true, message: "纳税人识别码不能为空", trigger: "blur" }
        ],
        licenseNo: [
          { required: true, message: "道路运输经营许可证号不能为空", trigger: "blur" }
        ],
        tel: [
          { required: true, message: "公司电话不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "注册地址不能为空", trigger: "blur" }
        ],
        legal: [
          { required: true, message: "法人姓名不能为空", trigger: "blur" }
        ],
        bankcard: [
          { required: true, message: "银行账号不能为空", trigger: "blur" }
        ],
        bank: [
          { required: true, message: "开户行不能为空", trigger: "blur" }
        ],
        businessLicense: [
          { required: true, message: "营业执照不能为空", trigger: "blur" }
        ],
        roadLicense: [
          { required: true, message: "道路运输经营许可证不能为空", trigger: "blur" }
        ],
        idCardImg1: [
          { required: true, message: "法人身份证人像面不能为空", trigger: "blur" }
        ],
        idCardImg2: [
          { required: true, message: "法人身份证国徽面不能为空", trigger: "blur" }
        ]
      }
    };
  },
  watch: {
    mode: function(newData, oldData) {
      if(newData) {
        if(newData == '1' || newData == '2') {
          this.readonly = false;
        } else {
          this.readonly = true;
        }
      }
    },
    companyId: function(newData, oldData) {
      this.reset();
      this.srcList = [];
      if(newData) {
        getCompany(newData).then(response => {
          this.form = response.data;
          // 默认填充一张图片
          if(this.form.businessLicense) {
            this.srcList.push(this.form.businessLicense);
          }
        });
      }
    }
  },
  created() {
    this.reset();
  },
  methods: {
    // 营业执照上传回调函数
    licenseUploadSuccess(imageUrl) {
      this.form.businessLicense = imageUrl;
      if(imageUrl) {
        ocrBusinessLicense(imageUrl).then(res => {
          this.form.companyName = res.data.companyName || '';
          this.form.taxNo = res.data.taxNo || '';
          this.form.address = res.data.address || '';
          this.form.legal = res.data.legal || '';
        }).catch(err => {})
      }
    },
    // 道路运输经营许可证上传回调函数
    roadUploadSuccess(imageUrl) {
      this.form.roadLicense = imageUrl;
    },
    // 身份证人像面上传回调函数
    idCard1UploadSuccess(imageUrl) {
      this.form.idCardImg1 = imageUrl;
    },
    // 身份证国徽面上传回调函数
    idCard2UploadSuccess(imageUrl) {
      this.form.idCardImg2 = imageUrl;
    },
    // 图片预览
    preview(url) {
      this.srcList = [];
      if(url) {
        this.srcList.push(url)
      }
    },
    // 取消按钮
    cancel() {
      this.huidiao();
    },
    huidiao() {
      this.reset();
      this.$emit("close");
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userId: null,
        companyName: null,
        shortCode: null,
        taxNo: null,
        licenseNo: null,
        tel: null,
        address: null,
        legal: null,
        linker: null,
        linktel: null,
        bank: null,
        bankcard: null,
        businessLicense: null,
        roadLicense: null,
        idCardImg1: null,
        idCardImg2: null,
        isCert: null,
        state: null,
        tenantId: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.disabled = true;
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            if(this.form.isCert != this.$store.state.constants.isCert_yrz) {
              this.form.isCert = this.$store.state.constants.isCert_shz;
            }
            updateCompany(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.disabled = false;
              this.huidiao();
            }).catch(err => {
              this.disabled = false;
            })
          } else {
            this.form.userId = this.$store.state.user.userId;
            this.form.isCert = this.$store.state.constants.isCert_shz;
            addCompany(this.form).then(response => {
              this.$modal.msgSuccess("提交成功，请等待审核");
              this.disabled = false;
              this.huidiao();
            }).catch(err => {
              this.disabled = false;
            })
          }
        } else {
          this.disabled = false;
        }
      });
    }
  }
};
</script>

<style>
  .select {
    width: 100%;
  }
  .dialog-footerr {
    text-align: center;
  }
  .image-slot {
    width: 160px;
    height: 160px;
    background: #F5F7FA;
  }
  .el-icon-picture-outline {
    display: block;
    text-align: center;
    line-height: 160px;
  }
</style>
